<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;">
      信息
    </div>
    <div class="tw-grid tw-grid-cols-2 tw-m-5 tw-gap-10">
      <div class="tw-grid tw-grid-cols-2 tw-border">
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="perm_identity" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          教师姓名:
          </span>
          {{ info.tname }}
        </div>
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="perm_identity" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          教师职称:
          </span>
          {{ info.ttile }}
        </div>
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="school" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          学院:
          </span>
          {{ info.dept }}
        </div>
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="mail" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          教师邮箱:
          </span>
          {{ info.email }}
        </div>
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="phone" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          教师电话:
          </span>
          {{ info.tel }}
        </div>
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="bookmark_border" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          教师QQ:
          </span>
          {{ info.qq }}
        </div>
        <div class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="home" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">
          教师办公室:
          </span>
          {{ info.location }}
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="person" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">身份: </span>
          <span class="tw-text-gray-700">教师</span>
        </div>
      </div>
      <div class="tw-border">
        <div id="container"></div>
      </div>
    </div>
    <q-separator class="q-ma-lg"/>


  </div>

</template>

<script setup>
import {api} from "boot/axios";
import {ref} from "vue";
import {Liquid} from "@antv/g2plot";

let info = JSON.parse(localStorage.getItem('info'))
let projects = ref([])
api({
  url: '/job/teacher/getproject?' + new URLSearchParams({tnum: info.tnum}),
  method: 'get'
}).then(res => {
  projects.value = res.data.data
  return projects.value
}).then((projects) => {

  const liquidPlot = new Liquid('container', {
    percent: projects.length / info.project_num,
    outline: {
      border: 4,
      distance: 8,
    },
    // title
    statistic: {
      title: {
        formatter: () => '已出题数',
        style: {
          fontSize: '35px',
          fill: '#545454',
          textAlign: 'center',
        },
      },
      content: {
        style: {
          fontSize: '35px',
          fill: '#545454',
          textAlign: 'center',
        },
        formatter: () => projects.length +'/' + info.project_num,
      },
    },
  });
  liquidPlot.render();
})

</script>

<style scoped>

</style>
